<template>
    <!--<dv-full-screen-container>-->
    <div style="padding: 10px"> <!--background: #001529;-->
        <a-row style="height: 300px" :gutter="10">
            <a-col :span="8">
                <dv-border-box-7>
                    <div style="padding: 20px">
                        <CentreLeft1Chart />
                    </div>
                </dv-border-box-7>
            </a-col>
            <a-col :span="8">
                <dv-border-box-7>
                    <div style="padding: 20px;width: 100%;height: 100%;    display: flex;justify-content: center;">
                        <CentreLeft2Chart />
                    </div>
                </dv-border-box-7>
            </a-col>
            <a-col :span="8">
                <dv-border-box-7>
                    <div style="padding: 20px;width: 100%;height: 100%;">
                        <dv-water-level-pond :config="config" style="width:250px;height:200px" />
                    </div>
                </dv-border-box-7>
            </a-col>
        </a-row>
        <a-row  :gutter="10" style="margin-top: 10px">
            <a-col :span="12">
                <dv-border-box-12>
                    <div style="padding: 20px">
                        <dv-conical-column-chart :config="config1" style="width:300px;height:200px;" />
                    </div>
                </dv-border-box-12>
            </a-col>
            <a-col :span="12">
                <dv-border-box-12>
                    <div style="padding: 20px">
                        <dv-water-level-pond :config="config" style="width:250px;height:200px" />
                    </div>
                </dv-border-box-12>
            </a-col>
        </a-row>

    </div>
    <!--</dv-full-screen-container>-->
</template>

<script>
    import CentreLeft1Chart from "@/components/echart/centerLeft/centerLeft1Chart";
    import CentreLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
    export default {
        name: "dashboard",
        components: {
            CentreLeft1Chart,
            CentreLeft2Chart
        },
        data () {
            return {
                config:{
                    data: [66, 45],
                    shape: 'roundRect'
                },
                config1:{
                    data: [
                        {
                            name: '数据1',
                            value: 55
                        },
                        {
                            name: '数据2',
                            value: 120
                        },
                        {
                            name: '数据3',
                            value: 71
                        },
                        {
                            name: '数据4',
                            value: 66
                        },
                        {
                            name: '数据5',
                            value: 80
                        },
                        {
                            name: '数据6',
                            value: 35
                        },
                        {
                            name: '数据1',
                            value: 15
                        }
                    ],
                    img: [
                        require('../assets/img/1st.png'),
                        require('../assets/img/2st.png'),
                        require('../assets/img/3st.png'),
                        require('../assets/img/4st.png'),
                        require('../assets/img/5st.png'),
                        require('../assets/img/6st.png'),
                        require('../assets/img/7st.png')
                    ],
                    showValue: true
                }
            }
        },
        mounted () {
        },
        methods: {
        }
    }
</script>

<style scoped>
#map{
    min-height: 200px;
    width: 100%;
    height: 100%;
}
</style>
<style>
</style>
